<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .w{
            width:1280px;
            margin:20px auto;
        }
        a{
            color:inherit;
            text-decoration: none;
        }
        .good{
            text-align: center;
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color:inherit;
        }
        img{

        }
        .list{
            width:1200px;
            padding:20px;
            box-sizing:border-box;
            margin:50px auto 0;
            overflow: hidden;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;

        }
        .list li {
            /* width:220px; */
            text-align: center;
            padding:10px;
            font-size: 14px;
            box-sizing: border-box;
            width: -webkit-calc(100%/5);
            width:20%;
            cursor: pointer;
        }
        .list li img{
            width:100%;
            transition: 1s all;
            height:212px;
        }
        .info{
            font-size: 16px;
            line-height: 24px;
            /* 多行文本溢出隐藏 */
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;
            transition: 1s all;
            
        }
        .price{
            font-family: 'JDZH-Regular', sans-serif;
            display: inline-block;
            color: #f02b2b;
            margin-top: 5px;
            margin-right: 5px;
            font-size: 16px;
        }

        .list li:hover{
            box-shadow:  0 0 4px 2px rgba(0, 0, 0, 0.5);
        }

        .list li:hover img{
            /* width:106%;
            height:220px; */
        }
        .form{
            width:1100px;
            margin:10px auto;
            display: flex;
            justify-content: center;
        }
        .orderBox{
            display: flex;
            margin:0 15px;
        }
        .orderColBox{
            display: flex;
            margin:0 15px;
            border:1px dotted plum;
        }
        .orderTypeBox{
            display: flex;
            margin:0 15px;
            border:1px dotted plum;
        }

        .pagebox{
            display: flex;
            margin:0 15px;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div>
        <h4> jsonp  请求京东 商品数据渲染 .</h4>
        <ul class="list">
            
        </ul>
    </div>
    <script>
   
    var jdsrc = "https://floor.jd.com/user-v20/feed/get";
    var ul =document.getElementsByClassName('list')[0]
    var page = 1;
    // page
    // pagesize
    // callback 回调函数名称 
    loadAllData();
    
    // https://img14.360buyimg.com/n7/jfs/t1/200774/22/1272/94005/61139062E2f3ab7b3/8af3e6624ceba8a8.jpg
    // jfs/t1/183608/16/17190/144012/6107bbd9Ef55ce71d/e33e2a0e4f03a526.jpg
    // async loadAllData 就是一个Promise对象 
    async function loadAllData(){
        var result = await $.jsonp({   // await 等待当前的promise状态改变 才能执行下一步
            url:jdsrc,
            data:{
                page:page,
                pagesize:20,
                area:"1_72_55653_0",
                source:"pc-home",
            },
            jsonp:"callback",
            jsonpcallback:"haha"
        })    // 异步操作 转为 同步函数 
        // $.jsonp().then()
        console.log(result)
        var {data} = result;
        var html = ""
        data.forEach((item,index)=>{
            // console.log(item)
            var {t,img,op} = item;
            html+= `
                <li>
                    <a href="">
                        <img src="https://img14.360buyimg.com/n7/${img}" alt="">
                    </a>
                    <p class="info"> ${t} </p>
                    <p class="price"   >
                        ￥<span>${op}</span>
                    </p>
                </li>
            `
        })
        ul.innerHTML += html;
    }

    // jsonp 原理 是动态创建一个script 标签  通过script的src去请求接口 然后解析接口返回的callback回调函数 得到数据 
    // jsonp 不是真正ajax 

    // 滑动加载更多
    var isRequest = false ;  // 判断是否正在请求 jsonp 
    window.onscroll = function(){
        if(isRequest) return false;
        if(page>=20) return false;

        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

        var scrollMax = scrollHeight  - clientHeight; 
        console.log(scrollMax)

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        
        // 判断是否已经滑到距离底部 50px 
        if(scrollTop>scrollMax-50 ){
            page++;
            console.log("已经差不多滑动到底部了");
            isRequest = true ; // 请求 jsonp 
            loadAllData()
            .then(()=>{
                isRequest = false ;  // 请求已经结束 
            })
        }
        
    }
    </script>
</body>
</html>